import * as React from "react"
import { View, Text, ViewStyle, TextStyle, TextInput, TouchableOpacity } from "react-native"
import { AmountchoiceProps } from "./amountchoice.props"
import { px2dp } from "../../utils"
import { color } from "@/theme"

const cardList: ViewStyle = {
  flexDirection: "row",
  flexWrap: "wrap",
  justifyContent: "space-between"
}

const card: ViewStyle = {
  marginTop: px2dp(15),
  width: px2dp(73),
  height: px2dp(36),
  borderWidth: px2dp(1),
  borderColor: color.amountChoiceCardBorder,
  borderStyle: "solid",
  borderRadius: px2dp(4)
}

const cardText: TextStyle = {
  textAlign: "center",
  lineHeight: px2dp(36),
  color: color.amountChoiceCardBorder
}

const selectcCard: ViewStyle = {
  marginTop: px2dp(15),
  width: px2dp(73),
  height: px2dp(36),
  borderWidth: px2dp(1),
  borderColor: color.themeColor,
  borderStyle: "solid",
  borderRadius: px2dp(4),
  backgroundColor: color.themeColor
}

const selectcCardText: TextStyle = {
  textAlign: "center",
  lineHeight: px2dp(36),
  color: color.text
}

const styleInput: ViewStyle = {
  backgroundColor: color.backgroundInnerPage,
  height: px2dp(42),
  width: px2dp(311),
  borderRadius: px2dp(4),
  justifyContent: "center",
  paddingHorizontal: px2dp(8)
}

const styleInputText: TextStyle = {
  fontSize: px2dp(16)
}

// 充值金额选项(默认)
const numberOption = [100, 200, 10000, 1999, 2999, 3999, 4999, 8999]

export class Amountchoice extends React.Component<AmountchoiceProps, {}> {
  state = {
    inputValue: "",
    showOption: []
  }
  componentDidMount() {
    this.setState({
      showOption: (this.props.amountArray || numberOption).map(item => {
        return { number: item, status: false }
      })
    })
  }
  /**
   *
   * @param 输入金额
   * @param 最大充值金额
   * @param 最小充值金额
   */
  private validationValue(value?: string, max?: number, least?: number): any {
    const backValue = Number(value.replace(/,/g, ""))
    if (backValue <= least && least >= 0) {
      // 充值最小金额不能小于 least
      console.log("充值最小金额不能小于 least")
      return
    }
    if (backValue > max && max > 0) {
      // 充值最大金额不能大于 least
      console.log("充值最大金额不能大于 least")
      return
    }
    return backValue
  }

  public render() {
    const { maxAmount, leastAmount, amountchoiceClick } = this.props

    return (
      <View>
        <View style={cardList}>
          {this.state.showOption.map((item, index) => {
            return (
              <TouchableOpacity
                key={index}
                onPress={() => {
                  amountchoiceClick(Number(item.number))
                  this.setState({
                    inputValue: String(item.number),
                    showOption: (this.props.amountArray || numberOption).map((item, i) => {
                      return { number: item, status: index === i }
                    })
                  })
                }}
              >
                <View style={item.status ? selectcCard : card} key={index}>
                  <Text style={item.status ? selectcCardText : cardText}>{item.number}元</Text>
                </View>
              </TouchableOpacity>
            )
          })}
        </View>

        <View style={{ alignItems: "center", marginTop: px2dp(20) }}>
          <View style={styleInput}>
            <TextInput
              style={styleInputText}
              placeholder={"输入其他金额"}
              onChangeText={value => {
                this.setState({
                  showOption: (this.props.amountArray || numberOption).map(item => {
                    return { number: item, status: false }
                  })
                })
                const newValue = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, "$1")
                this.setState({ inputValue: newValue })
                amountchoiceClick(this.validationValue(newValue, maxAmount, leastAmount))
              }}
              value={this.state.inputValue}
            ></TextInput>
          </View>
        </View>
      </View>
    )
  }
}
